<!DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>框模型-外边距</title>
    <style>
        .outline{
            outline: 2px dashed red;
            margin: 20px;
            padding: 1px;
            /*padding: 10px;*/
        }
        .l{
            outline: 2px solid dodgerblue;
            margin-left: 10px;
        }
        .r{
            outline: 2px solid dodgerblue;
            margin-right: 10px;
        }
        .t{
            outline: 2px solid dodgerblue;
            margin-top: 10px;
        }
        .b{
            outline: 2px solid dodgerblue;
            margin-bottom: 10px;
        }
        .neg{
            outline: 2px solid dodgerblue;
            margin-left: -10px;
        }
    </style>
</head>
<body>
    <div class="outline">
        <div class="l">
            margin-left: 10px;
        </div>
    </div>
    <div class="outline">
        <div class="r">
            margin-rigth: 10px;
        </div>
    </div>
    <div class="outline">
        <div class="t">
            margin-top: 10px;
        </div>
    </div>
    <div class="outline">
        <div class="b">
            margin-bottom: 10px;
        </div>
    </div>
    <div class="outline">
        <div class="neg">
            margin-left: -10px;
        </div>
    </div>
</body>